<template>
  <div class="dataContainer">
    <!-- Search start -->
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="角色名称:">
        <el-input v-model="queryParams.roleName" maxlength="20" placeholder="请输入角色名称" @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" class="bs-form-btn" type="primary" @click="onSearch"><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
        <el-button size="small" type="primary" @click="openAddModal()" v-permission="['system::roleAdd']"> <el-icon><Plus /></el-icon>新 增 </el-button>
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- Table start -->
    <div>
       <ColumnSetting v-model:columnList="columnList" />
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="roleId"
        :border="true"
        class="bs-table"
        :header-cell-style="headerStyle"
        :cell-style="cellStyle"
        height="67vh"
        table-layout='fixed'
      >
        <el-table-column prop="number" type="index" label="序号" width="100" />
        <template v-for="item in columnList" :key="item.prop">
          <el-table-column :prop="item.prop" :label="item.label" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
            <template #default="scope">
              <template v-if="item.prop=='roleStatus'">
                <div :style="{'background':getBgColor(scope.row.roleStatus)}" class="tagClass"> {{ getStatus(scope.row.roleStatus) }} </div>
              </template>
              <template v-else >
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="260"  v-permission="['system::roleUpdate','system::roleAccredit','system::roleDelete']" v-else-if="!item.hide && item.prop=='action'">
            <template #default="scope">
              <el-button size="small" link type="success"  @click="openEditModal(scope.row)" v-permission="['system::roleUpdate']"> <el-icon><Edit /></el-icon> 修改</el-button>
              <el-button size="small" link type="warning"  @click="accreditRole(scope.row)" v-permission="['system::roleAccredit']"> <el-icon><Switch /></el-icon> 授权</el-button>
              <el-button size="small" link type="danger" @click="deleteRole(scope.row)" v-permission="['system::roleDelete']"><el-icon><Delete /></el-icon>删除</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <!-- Table end -->
    <AddOrUpdate ref="addOrUpdateRef" @flushTable="onSearch" />
    <Accredit ref="accreditRef" />
  </div>
</template>

<script>
import { deleteRole, listAllRole } from '@/api/system/role'
import Pagination from '@/components/Pagination'
import AddOrUpdate from './addOrUpdate.vue'
import Accredit from './accredit.vue'

export default {
  components: {
    Pagination,
    AddOrUpdate,
    Accredit,
  },
  data() {
    return {
      tableTotal: 0,
      tableLoading: false,
      tableData: [],
      // 搜索表单数据
      queryParams: {
        roleName: ''
      },
      columnList:[
        {prop:'roleName',label:'角色名称',sortable:true,sort:1,hide:false,fixed:false,width:300},
        {prop:'roleStatus',label:'状态',sortable:false,sort:2,hide:false,fixed:false},
        {prop:'remark',label:'备注',sortable:false,sort:2,hide:false,fixed:false},
        {prop:'creatorName',label:'创建人',sortable:false,sort:3,hide:false,fixed:false},
        {prop:'createTime',label:'创建时间',sortable:true,sort:4,hide:false,fixed:false,width:180},
        {prop:'action',label:'操作',sortable:true,sort:5,hide:false,fixed:'right'},
      ]
    }
  },
  created() {
    this.selectRoleAll()
  },
  methods: {
    getStatus(status) {
      if (status == 1) {
        return '启用'
      } else if (status == 2) {
        return '禁用'
      } if (status == 3) {
        return '删除'
      }
    },
    // 不同状态返回不同颜色
    getBgColor(status) {
      if (status == 1) {
        return '#1890ff'
      } else if (status == 2) {
        return '#c5c744'
      } if (status == 3) {
        return 'red'
      }
    },
    // 分页查询
    selectRoleAll() {
      const params = JSON.parse(JSON.stringify(this.queryParams))
      this.tableLoading = true
      listAllRole(params)
        .then((res) => {
          this.tableLoading = false
          if (res.code === 1) {
            this.tableData = res.data
          }
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    // 搜索
    onSearch() {
      this.selectRoleAll()
    },
    // 打开授权弹框
    accreditRole(row) {
      this.$refs.accreditRef.openModal(row.roleId)
    },
    // 打开编辑弹框
    openEditModal(row) {
      this.$refs.addOrUpdateRef.openModal(row.roleId)
    },
    // 打开新增弹框
    openAddModal() {
      this.$refs.addOrUpdateRef.openModal(null)
    },
    // 删除用户
    deleteRole(row) {
      this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRole({ 'roleId': row.roleId }).then(res => {
          if (res.code === 1) {
            this.onSearch()
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(()=>{})
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (column['label'] === '角色名称') {
        return { textAlign: 'left', paddingLeft: '10px' }
      }
      return { textAlign: 'center' }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { textAlign: column['label'] === '角色名称' ? 'left' : 'center' }
    },
  }
}
</script>

<style scoped>
.tagClass {
  display: inline-block;
  padding: 0px 10px;
  font-size: 12px;
  color: white;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  word-break: break-word;
}
/* .bs-page-table {
  max-height: 70vh;
  overflow-y: scroll;
} */
/* table表格内容样式居中(列宽不够时,所有列居左展示) */
/deep/.el-scrollbar__wrap,/deep/ .el-scrollbar__wrap--hidden-default {
  text-align: left;
}
</style>
